<template><div><h1 id="html-和-css-相关面试题" tabindex="-1"><a class="header-anchor" href="#html-和-css-相关面试题" aria-hidden="true">#</a> html 和 css 相关面试题</h1>
<h3 id="seo-和语义化" tabindex="-1"><a class="header-anchor" href="#seo-和语义化" aria-hidden="true">#</a> SEO 和语义化</h3>
<p><code v-pre>SEO</code>就是搜索引擎优化，利用搜索引擎的搜索规则来提高网站的自然排名，比如对网站的标题、关键字、描述精心设置，比如网站的结构布局设计和网页代码优化<br>
<code v-pre>语义化</code>就根据内容结构化选择合适的标签和特有的属性去格式化文档内容，在没有CSS的情况下也能呈现出很好的内容结构，代码结构，便于开发者阅读和维护，同时也利于SEO</p>
<h3 id="alt和title的作用及区别" tabindex="-1"><a class="header-anchor" href="#alt和title的作用及区别" aria-hidden="true">#</a> alt和title的作用及区别</h3>
<p><code v-pre>共同点</code>是有利于SEO<br>
<code v-pre>不同点</code>是alt是图片不能正常显示时出现的提示信息；title是鼠标移到元素上时显示的提示信息，而且大多数标签都支持title属性，但是优先级要低于alt（都在图片上图片不能正常显示时）;title内容可以比alt更长;</p>
<h3 id="html自动刷新或跳转" tabindex="-1"><a class="header-anchor" href="#html自动刷新或跳转" aria-hidden="true">#</a> HTML自动刷新或跳转</h3>
<p>除了定时器控制页面跳转还有更简洁的方法，比如<code v-pre>meta</code>标签</p>
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token comment">&lt;!-- 5秒后自动跳转到page2.html --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Refresh<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5; URL=page2.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!-- 30秒后自动刷新当前页面 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Refresh<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>比如实现PPT自动播放功能或者自动返回首页，或者做大屏幕监控的时候用这样的方法来自动刷新，是不是很简单呢<br>
当然它的缺点是刷新和跳转是不可取消的，如果需要动态刷新或者手动取消的，还是推荐定时器</p>
<h3 id="如何利用标签提升渲染速度" tabindex="-1"><a class="header-anchor" href="#如何利用标签提升渲染速度" aria-hidden="true">#</a> 如何利用标签提升渲染速度</h3>
<h4 id="link标签" tabindex="-1"><a class="header-anchor" href="#link标签" aria-hidden="true">#</a> <strong>link标签</strong></h4>
<p>通过rel属性进行预加载，如</p>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">&lt;</span>link rel<span class="token operator">=</span><span class="token string">"dns-prefetch"</span> href<span class="token operator">=</span><span class="token string">"//xx.baidu.com"</span><span class="token operator">></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>rel有几个属性：</p>
<ul>
<li><code v-pre>dns-prefetch</code>：浏览器会对href中的域名进行DNS解析并缓存，当再次请求该域名资源时，能省去查询IP的过程，从而减少时间损耗</li>
<li><code v-pre>prefetch/preload</code>：都是预先下载并缓存某个资源，不同的是prefetch可能会在浏览器忙时被忽略，而preload则一定会预先下载</li>
<li><code v-pre>preconnect</code>：正式发送http请求前预先执行DNS解析、TCP握手、TLS协商。通过消除往返延迟来节省时间</li>
<li><code v-pre>prerender</code>：浏览器不仅会加载资源，还会解析执行页面，并进行预渲染</li>
</ul>
<h4 id="script标签" tabindex="-1"><a class="header-anchor" href="#script标签" aria-hidden="true">#</a> <strong>script标签</strong></h4>
<p>由于浏览器底层运行机制，渲染引擎在解析HTML时遇到script标签引用文件是会暂停解析过程的，同时通过网络线程加载文件，文件加载后切换至js引擎执行相应代码，代码执行完成后再切换回渲染引擎继续渲染页面</p>
<p>可是首次渲染可能并不依赖这些js文件，这就延长了页面渲染的时间，所以为了减少这些时间损耗，可以通过script标签三个属性来实现：</p>
<ul>
<li>async：立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后再阻塞渲染引擎并执行js先</li>
<li>defer：立即请求文件，但不阻塞渲染引擎，等解析完HTML再执行js</li>
<li>H5标准的type=&quot;module&quot;：让浏览器按照ES6标准将文件当模板解析，默认阻塞效果和defer一样，也可以配合async在请求完成后立即执行</li>
</ul>
<h3 id="href和src的区别" tabindex="-1"><a class="header-anchor" href="#href和src的区别" aria-hidden="true">#</a> href和src的区别</h3>
<blockquote>
<p>href是引用，src是引入</p>
</blockquote>
<p><strong>href:</strong></p>
<ul>
<li>href引入的CSS会阻塞页面渲染，CSS加载完成才会进行渲染，所以渲染出来就是带样式的</li>
<li>不会阻塞js加载，但是会阻塞js的执行，因为js执行可能会操作DOM，所以CSS加载完之前执行js是可能会有问题的</li>
</ul>
<p><strong>src:</strong></p>
<ul>
<li>src引入的js会阻塞页面的渲染(没有defer和async的情况下)，因为js很可能操作DOM修改文档结构</li>
<li>多个脚本时不会不阻塞后续资源的加载，但是会阻塞后续js逻辑的执行，按顺序执行</li>
</ul>
<h3 id="媒体查询" tabindex="-1"><a class="header-anchor" href="#媒体查询" aria-hidden="true">#</a> 媒体查询</h3>
<p>通过媒体查询可以为不同大小尺寸的设备使用不同的 CSS，达到自适应的目的。可以通过 html 或者 CSS 设置</p>
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>viewport<span class="token punctuation">'</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width,initial-scale=1. maximum-scale=1,user-scalable=no<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xxx.css<span class="token punctuation">"</span></span> <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>only screen and(max-device-width: 480px)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

@media only screen and(max-device-width:480px){ ... }
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="link-和-import" tabindex="-1"><a class="header-anchor" href="#link-和-import" aria-hidden="true">#</a> link 和 @import</h3>
<ul>
<li><code v-pre>link：</code>是html引入方式；最大限度支持并行下载；优先级高于 @import；可以通过 ref=&quot;alternate stylesheet&quot; 指定候选样式</li>
<li><code v-pre>@import：</code>是CSS引入方式，必须写在样式之前；可以嵌套，但过多嵌套会导致串行下载，出现文档样式暂失效；老浏览器不支持</li>
</ul>
<h3 id="深度选择器" tabindex="-1"><a class="header-anchor" href="#深度选择器" aria-hidden="true">#</a> 深度选择器</h3>
<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token operator">>>></span>、<span class="token operator">/</span>deep<span class="token operator">/</span>、<span class="token operator">:</span><span class="token operator">:</span>v<span class="token operator">-</span>deep
都是深度选择器，可以操作样式穿透，用于局部修改<span class="token constant">UI</span>组件库默认样式

区别是 <span class="token operator">>>></span> 只作用于 <span class="token constant">CSS</span>，在 Less<span class="token operator">/</span>Sass 中无法识别，所以用 deep 代替，
在 Vue3<span class="token punctuation">.</span><span class="token number">0</span>之前用 <span class="token operator">/</span>deep<span class="token operator">/</span>，Vue3<span class="token punctuation">.</span><span class="token number">0</span><span class="token literal-property property">之后用</span> <span class="token operator">:</span><span class="token operator">:</span>v<span class="token operator">-</span>deep
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="position-都有哪些属性" tabindex="-1"><a class="header-anchor" href="#position-都有哪些属性" aria-hidden="true">#</a> position 都有哪些属性</h3>
<blockquote>
<p>有些人还只知道 4 个属性~</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align:center">属性</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">static</td>
<td style="text-align:left">正常文档流，无定位</td>
</tr>
<tr>
<td style="text-align:center">relative</td>
<td style="text-align:left">正常文档流，相对自身定位</td>
</tr>
<tr>
<td style="text-align:center">absolute</td>
<td style="text-align:left">脱离文档流，相对上级有 position 属性且值不为 static 的元素定位，若没有则相对 body 定位</td>
</tr>
<tr>
<td style="text-align:center">fixed</td>
<td style="text-align:left">脱离文档流，相对于浏览器窗口定位</td>
</tr>
<tr>
<td style="text-align:center">sticky</td>
<td style="text-align:left">根据窗口滚动自动切换 relative 和 fixed，由 top 决定</td>
</tr>
</tbody>
</table>
<h3 id="display-都有哪些属性" tabindex="-1"><a class="header-anchor" href="#display-都有哪些属性" aria-hidden="true">#</a> display 都有哪些属性</h3>
<table>
<thead>
<tr>
<th style="text-align:center">值</th>
<th style="text-align:left">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">none</td>
<td style="text-align:left">此元素不会被显示。</td>
</tr>
<tr>
<td style="text-align:center">block</td>
<td style="text-align:left">此元素将显示为块级元素，此元素前后会带有换行符。</td>
</tr>
<tr>
<td style="text-align:center">inline</td>
<td style="text-align:left">默认。此元素会被显示为内联元素，元素前后没有换行符。</td>
</tr>
<tr>
<td style="text-align:center">inline-block</td>
<td style="text-align:left">行内块元素。</td>
</tr>
<tr>
<td style="text-align:center">table</td>
<td style="text-align:left">此元素会作为块级表格来显示，表格前后带有换行符。</td>
</tr>
<tr>
<td style="text-align:center">inherit</td>
<td style="text-align:left">规定应该从父元素继承 display 属性的值。</td>
</tr>
<tr>
<td style="text-align:center">flex</td>
<td style="text-align:left">弹性盒模型。</td>
</tr>
<tr>
<td style="text-align:center">grid</td>
<td style="text-align:left">网格布局。</td>
</tr>
</tbody>
</table>
<h3 id="几种隐藏的区别" tabindex="-1"><a class="header-anchor" href="#几种隐藏的区别" aria-hidden="true">#</a> 几种隐藏的区别</h3>
<ul>
<li><code v-pre>visibility:hidden:</code> 隐藏元素，会继续在文档流中占位，所以触发重绘，隐藏后不能触发点击事件</li>
<li><code v-pre>display:none:</code>隐藏元素，会从页面中删除掉，所以会触发重排和重绘</li>
<li><code v-pre>opacity:0:</code>透明，会继续在文档流中占位，所以触发重绘。由是是作用于元素自身，所以子元素会继承，全部变透明，透明后可以触发点击事件</li>
<li><code v-pre>rgba(0,0,0,0):</code>透明，会继续在文档流中占位，所以触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件</li>
</ul>
<div class="custom-container tip">
<p class="custom-container-title">transition 过渡不支持 display:none，其他三个是支持的</p>
</div>
<h3 id="什么时候会导致重排" tabindex="-1"><a class="header-anchor" href="#什么时候会导致重排" aria-hidden="true">#</a> 什么时候会导致重排</h3>
<ul>
<li>添加、删除、更新 DOM 节点</li>
<li>display: none</li>
<li>动画</li>
<li>添加或改变字号、宽高等样式</li>
<li>用户行为，比如滚动、调整窗口大小</li>
</ul>
<h3 id="怎么减少重排影响" tabindex="-1"><a class="header-anchor" href="#怎么减少重排影响" aria-hidden="true">#</a> 怎么减少重排影响</h3>
<ul>
<li>避免使用大量 style 属性，而是用 class</li>
<li>让动画元素脱离文档流，这样不会影响到其他的布局分层</li>
<li>能用 CSS 动画的就不要用 JS 动画</li>
<li>尽量不要用 table 布局</li>
</ul>
<h3 id="margin-和-padding" tabindex="-1"><a class="header-anchor" href="#margin-和-padding" aria-hidden="true">#</a> margin 和 padding</h3>
<p>margin 和 padding 对行内元素的影响，比如 span，默认设置不了宽高的，但是可以设置 margin 和 padding, 不过设置后 margin 和 padding 都只有水平方向有效果，垂直方向是没有效果的</p>
<p><strong>两个div上下排列，都设置 margin 会怎样？</strong><br>
会发生边距重叠，margin 都大于0就取较大值，一正一负就相加，都负取较大绝对值为什么会这样？<br>
就是由于 BFC</p>
<h3 id="bfc" tabindex="-1"><a class="header-anchor" href="#bfc" aria-hidden="true">#</a> BFC</h3>
<blockquote>
<p>BFC就是块级元素格式化上下文，相当于一个容器，里面的布局不会影响到外面的元素。IFC就是内联元素格式化上下文</p>
</blockquote>
<p><strong>BFC渲染规则或特性：</strong></p>
<ul>
<li>BFC元素垂直方向的边距会发生重叠，由 margin 决定</li>
<li>BFC的区域不会与浮动元素的区域重叠</li>
<li>BFC是一个独立的容器，子元素会影响外面元素</li>
<li>计算BFC高度的时候，浮动元素也会参与计算</li>
</ul>
<p><strong>怎么创建BFC或触发BFC：</strong></p>
<ul>
<li>html 就是一个 BFC</li>
<li>float值不为none,也就是说设置了浮动即可</li>
<li>position的值为absolute或者fixed</li>
<li>display值为table和flex相关的几个属性</li>
<li>overflow为auto或hidden</li>
</ul>
<p><strong>BFC使用场景：</strong></p>
<ol>
<li><code v-pre>外边距重叠</code>，如
<ul>
<li>父子元素都设置了margin-top</li>
<li>兄弟元素margin-bottom和margin-top会重叠</li>
<li>空元素设置了上下margin值不一样这三种情况没有BFC的话，margin会重叠取margin较大的那个</li>
</ul>
</li>
<li><code v-pre>左边定宽，右边自适应</code>，只需要给右边创建BFC即可
<img src="/images/bfc.png" alt="bfc" loading="lazy"></li>
<li>BFC可以<code v-pre>阻止浮动元素的覆盖</code>。父元素没有设置高度，子元素浮动了，不参与父元素高度计算，由于父元素高度为0，导致父元素的兄弟元素向上顶，与子元素重叠，只需给父元素创建BFC即可</li>
</ol>
<h3 id="清除浮动" tabindex="-1"><a class="header-anchor" href="#清除浮动" aria-hidden="true">#</a> 清除浮动</h3>
<p>设置浮动后 display 自动变成 block<br>
由于父元素没写高度时，子元素浮动后会导致父元素发生调试塌陷，所以需要清除浮动</p>
<p><strong>清除浮动方式：</strong></p>
<ul>
<li>给父级设置 overflow: hidden</li>
<li>给父级设置高度</li>
<li>父级也设置成浮动</li>
<li>浮动元素下添加空标签 div 并设置 CSS 样式:<code v-pre>{ clear: both;height:0;overflow:hidden }</code></li>
<li>使用伪类，如下</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.clearfix:after</span><span class="token punctuation">{</span>
  <span class="token property">visibility</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">" "</span><span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.clearfix</span><span class="token punctuation">{</span>
  <span class="token property">zoom</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="盒模型" tabindex="-1"><a class="header-anchor" href="#盒模型" aria-hidden="true">#</a> 盒模型</h3>
<ul>
<li>标准模式：元素的width/height = content + border + padding</li>
<li>怪异模式：元素的width/height = content(包含border和padding)</li>
</ul>
<p>通过CSS的 box-sizing 属性切换模式，content-box就是标准模式，border-box就是怪异模式</p>
<h3 id="标签之间空白间隙如何解决" tabindex="-1"><a class="header-anchor" href="#标签之间空白间隙如何解决" aria-hidden="true">#</a> 标签之间空白间隙如何解决</h3>
<ul>
<li>float: left</li>
<li>父元素 font-size:0，子元素再单独设置字体</li>
<li>margin 负值</li>
<li>letter-spacing 字间距</li>
<li>word-spacing 词间距</li>
<li>html 标签不换行(不利于阅读)</li>
<li>使用注释拼接，如下</li>
</ul>
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>第一行<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span><span class="token comment">&lt;!--
--></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>第二行<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="常见样式兼容问题" tabindex="-1"><a class="header-anchor" href="#常见样式兼容问题" aria-hidden="true">#</a> 常见样式兼容问题</h3>
<ul>
<li>不同浏览器默认 margin 和 padding 不一样</li>
<li>Chrome 默认文字最小12px，可添加 CSS 属性 -webkit-text-size-adjust:none; 解决，或用transform:scale()缩小</li>
<li>超链接访问过后 hover 和 active 样式就不出现了，解决办法是调整CSS属性顺序lvha：a:link{} a:visited{} a:hover{} a:active{}</li>
<li>Chrome 中 visibility 的值为 collapse和hidden是一样的，在Firefox,Opera和IE中，值为collapse和display:none是一样的</li>
<li>CSS3 属性添加针对不同浏览器的前缀</li>
</ul>
<h3 id="before-和-before-的区别" tabindex="-1"><a class="header-anchor" href="#before-和-before-的区别" aria-hidden="true">#</a> :before 和 ::before 的区别</h3>
<ul>
<li>单冒号是 <code v-pre>CSS2.1</code> 引入的，用于伪类，操作文档已有的元素，侧重于丰富选择器的选择能力</li>
<li>双冒号是 <code v-pre>CSS3</code> 引入的，用于伪元素，会创建文档树之外的元素，侧重于表达或定义不在语法定义范围内的抽象元素</li>
</ul>
<h3 id="水平垂直居中" tabindex="-1"><a class="header-anchor" href="#水平垂直居中" aria-hidden="true">#</a> 水平垂直居中</h3>
<h4 id="固定宽高" tabindex="-1"><a class="header-anchor" href="#固定宽高" aria-hidden="true">#</a> 固定宽高</h4>
<ul>
<li>absolute + 负margin</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.content</span> <span class="token punctuation">{</span>
   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
   <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
   <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
   <span class="token property">margin-top</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span> <span class="token comment">/* 这里的 50px 为宽高的一半 */</span>
   <span class="token property">margin-left</span><span class="token punctuation">:</span> -50px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>absolute + margin auto</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.content</span> <span class="token punctuation">{</span>
   <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
   <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
   <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
   <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
   <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
   <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="不固定宽高" tabindex="-1"><a class="header-anchor" href="#不固定宽高" aria-hidden="true">#</a> 不固定宽高</h4>
<ul>
<li>posolute + translate</li>
</ul>
<div class="language-CSS ext-CSS line-numbers-mode"><pre v-pre class="language-CSS"><code>.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>vertical-align + 伪元素</li>
</ul>
<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code>.box {
  width: 300px;
  height: 300px;
  text-align: center;
}
.box:after {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这碗又大又圆，这面又长又宽<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>flex</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.box:after</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
...
&lt;div class=<span class="token string">"box"</span>>
   &lt;span class=<span class="token string">"content"</span>>这碗又大又圆，这面又长又宽&lt;/span>
&lt;/div>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>flex</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.content</span> <span class="token punctuation">{</span>
  <span class="token property">justify-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
...
&lt;div class=<span class="token string">"box"</span>>
   &lt;div class=<span class="token string">"content"</span>>这碗又大又圆，这面又长又宽&lt;/div>
&lt;/div>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>table-cell</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> table-cell<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
...
&lt;div class=<span class="token string">"box"</span>>
   &lt;span class=<span class="token string">"content"</span>>这碗又大又圆，这面又长又宽&lt;/span>
&lt;/div>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>writing-mode</li>
</ul>
<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-lr<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.content</span> <span class="token punctuation">{</span>
  <span class="token property">writing-mode</span><span class="token punctuation">:</span> horizontal-tb<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
...
&lt;div class=<span class="token string">"box"</span>>
   &lt;div class=<span class="token string">"content"</span>>
       &lt;span>这碗又大又圆，这面又长又宽&lt;/span>
   &lt;/div>
&lt;/div>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div></template>


